<template>
	<view v-if="visible" class="co-popup animated fadeIn faster">
		<view class="co-popup-mask" @tap.stop="onCancel"></view>
		<view class="wash-bottom">
			<view class="close" @tap.stop="onCancel">
				<image src="http://www.xvopen.com/xiaoV/img1/close.png" mode=""></image>
			</view>
			<view :class="btnIndex==index?'cont-active':''" class="cont" v-for="(item,index) in btnList" :key="index" @tap.stop="onBtnClick(index)">
				<view>{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, watch} from "vue";

	const props = defineProps({
	  modelValue: {
	    type: Boolean
	  },
	  btnList: {
		type: Array,
		default: function(){
			return ['预约上门','物流到店','预约衣柜']
		}
	  }
	})

const emits = defineEmits(['update:modelValue' ,'click'])
const visible = ref(false)
//-----------------------------------watch----------------

	watch(() => props.modelValue,(newVal,oldVal) => {
	  visible.value = newVal
	},{immediate:true})

//-----------------------------------data-----------------
	let btnIndex = ref(0)



//-----------------------------------function-------------

	const onCancel = () => {
	  visible.value = false

	  emits('update:modelValue',  visible.value)
	}

	const onBtnClick = (index) => {
		btnIndex.value = index

	}

</script>

<style scoped lang="scss">
.wash-bottom{
	width: 750rpx;
	min-height: 535rpx;
	position: absolute;
	bottom: 0rpx;
	left: 0;
	background-color: #fff;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 32rpx 32rpx 200rpx;
	z-index: 100;
	.close{
		width: 686rpx;
		height: 28rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 43rpx;
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.cont{
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
		background-color: #E5F2FF;
	}
	.cont-active{
		background-color: #0080FF;
		color: #fff;
	}
}
</style>
